<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div>省份：
    <input type="text" id="pname">
    <button>查询</button>
</div>
<ul class="citylist">
    <!--   循环排列-->
    <!--    <li>显示省份下的城市</li>-->
    <!--    <li>如果输入的省份不存在，则返回“无相关城市信息”</li>-->
</ul>
<script>
    let pnameEle = document.querySelector('#pname');
    let btnEle = document.querySelector('button');
    let ulEle = document.querySelector('.citylist');
    btnEle.addEventListener('click', function () {
        // 方式1：使用axios方式实现：
        // axios.post('http://127.0.0.1:8000/api/city1', {
        //     pname: pnameEle.value
        // }).then(function (response) {
        //     console.log(response.data.list);
        //     let dataList = response.data.list;
        //     //     循环显示城市
        //     ulEle.innerHTML = ''; //初始化空值
        //     if (dataList.length) {
        //         for (let i = 0; i < dataList.length; i++) {
        //             let liEle = `<li>${dataList[i]}</li>`
        //             ulEle.innerHTML += liEle1;
        //         }
        //     } else {
        //         let liEle = `<li>无相关城市信息</li>`
        //         ulEle.innerHTML += liEle;
        //     }
        //
        //
        // }).catch(function (error) {
        //     console.log("error.message:", error.message);
        // })
        // 方式2：使用fetch API方式实现：
        fetch('http://127.0.0.1:8000/api/city2', {
            method: 'POST', // 指定请求方法
            headers: {
                'Content-Type': 'application/json'
            },
            body:
                {
                    pname: pnameEle.value
                }
        })
            .then(response => response.json()) // 解析响应数据
            .then(data => console.log(data)) // 处理数据
            .catch(error => console.error('Error:', error)); // 处理错误

    })


</script>
</body>
</html>


